<div class="tree-select" ng-class="{'tree-select-disabled': disabled, 'tree-select-open': isOpen}">
  <!-- 输入框区域 -->
  <div class="tree-select-input" ng-click="toggleDropdown($event)">
    <span class="tree-select-placeholder" ng-if="!displayText">{{ placeholder }}</span>
    <span class="tree-select-text" ng-if="displayText">{{ displayText }}</span>

    <!-- 清空按钮 -->
    <span class="tree-select-clear" ng-if="showClearButton()" ng-click="clearSelection($event)">
      <svg viewBox="0 0 24 24" width="14" height="14">
        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>
      </svg>
    </span>

    <!-- 下拉箭头 -->
    <span class="tree-select-arrow">
      <svg viewBox="0 0 24 24" width="14" height="14">
        <path d="M7 10l5 5 5-5z" fill="currentColor"/>
      </svg>
    </span>
  </div>

  <!-- 下拉面板 -->
  <div class="tree-select-dropdown" ng-if="isOpen">
    <!-- 树形选择器 -->
    <div class="tree-select-tree-wrapper">
      <multi-level-tree
        tree-data="treeData"
        id="{{ idField }}"
        label="{{ labelField }}"
        cascade="cascade"
        multiple="multiple"
        cascade-return-parent-only="cascadeReturnParentOnly"
        ng-model="internalSelectedIds">
      </multi-level-tree>

      <!-- 无数据提示 -->
      <div class="tree-select-empty" ng-if="!treeData || treeData.length === 0">
        <span>暂无数据</span>
      </div>
    </div>
  </div>
</div>
